import React, { useEffect,useState } from 'react'
import NavBarBox from '../../components/NavBar'
import { List,ActionSheet } from 'antd-mobile'
import { useParams } from 'react-router-dom'
import request from '../../utils/request'
import { SendOutline,StarOutline } from 'antd-mobile-icons'
import './index.scss'

const actions = [
    { text: '复制', key: 'copy' },
    { text: '修改', key: 'edit' },
    { text: '保存', key: 'save' },
  ]
const Detail = () => {
    const {id}=useParams()
    const [list, setList]=useState([])
    const [collect,setCollect]=useState(JSON.parse(localStorage.getItem('collect'))||[])
    const [visible, setVisible] = useState(false)
    // console.log(id)
    const getDetail=async()=>{
        // 7-2.接收列表页跳转传递的参数id，用id发送请求获取详情数据
        const res=await request.get(`/api/actor/detail/${id}`)
        // 7-3.将详情数据渲染在详情页面
        setList(res.data.data)
    }
    useEffect(()=>{
        getDetail()
    },[])

    // 点击右上角分享按钮底部出现分享框
    const handleSend=()=>{
        console.log('分享')
        setVisible(true)
    }

    // 点击左下角收藏按钮实现演出收藏和取消演出收藏的功能（本地存储）

    const handleCollect=(item)=>{
        console.log('收藏')
        if(collect.some(v=>v.id==item.id)){
            setCollect(prev=>{
                return prev.filter(v=>v.id!=item.id)
            })
            localStorage.setItem('collect',JSON.stringify(collect.filter(v=>v.id!=item.id)))
            
        }else{
            setCollect(prev=>{
                return [...prev,item]
            })
            localStorage.setItem('collect',JSON.stringify([...collect,item]))
        }
    }
  return (
    <div>
        {/* 7.实现演出详情页的功能 */}
      <NavBarBox title={'演出详情'} right={<SendOutline onClick={handleSend}/>}/>
      {/* 使用公共顶部标题组件实现顶部标题栏 */}
      <List>
      {/* 7-3.将详情数据渲染在详情页面 */}
        {
            list.map((item,index)=>{
                return <List.Item key={index}>
                    <div className="listItem">
                        <div className="imgBox">
                            <img src={item.coverImageUrl} alt="" />
                        </div>
                        <div className="right">
                            <h3>{item.name}</h3>
                            <p>{item.location}</p>
                            <p style={{fontWeight:'bold',color:'black'}}>￥{item.price}</p>
                        </div>
                        <div className='footer'>
                       <span onClick={()=>handleCollect(item)}>
                       {/* ，收藏图标根据收藏状态进行切换 */}
                       <StarOutline color={collect.some(v=>v.id===item.id)?'red':'black'}/>
                       </span>
                        </div>
                    </div>
                </List.Item>
            })
        }
        
      </List>
      {/* 点击右上角分享按钮底部出现分享框，点击分享框中的取消按钮关闭分享卡 */}
      <ActionSheet
        extra='分享框'
        cancelText='取消'
        visible={visible}
        actions={actions}
        onClose={() => setVisible(false)}
      />
    </div>
  )
}

export default Detail
